<template>
  <div class="register-container">
    <div class="register-form-wrapper">
      <!-- 返回按钮 -->
      <div class="back-to-home">
        <el-button type="text" @click="goToHome" class="back-button">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>

      <div class="register-header">
        <div class="logo"></div>
        <h2>创建账号</h2>
        <p class="subtitle">注册新用户账号</p>
      </div>

      <RegisterForm @success="onRegisterSuccess" />

      <div class="social-register">
        <p class="divider"><span>其他注册方式</span></p>
        <div class="social-buttons">
          <el-button circle @click="handleWechatRegister">
            <el-icon><ChatDotSquare /></el-icon>
          </el-button>
          <el-button circle @click="handleQQRegister">
            <el-icon><ChatLineRound /></el-icon>
          </el-button>
          <el-button circle @click="handleAlipayRegister">
            <el-icon><Wallet /></el-icon>
          </el-button>
        </div>
      </div>

      <div class="login-link">
        已有账号？
        <router-link to="/auth/login">立即登录</router-link>
      </div>
    </div>

    <div class="register-image" v-if="!isMobile">
      <div class="register-bg"></div>
    </div>

    <!-- 错误提示 -->
    <el-dialog v-model="errorDialogVisible" title="注册失败" width="400px" center>
      <p>{{ authStore.error }}</p>
      <template #footer>
        <el-button type="primary" @click="errorDialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'AuthRegister' })
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ChatDotSquare, ChatLineRound, Wallet, ArrowLeft } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
// import { createLogger } from '@/utils/logger'
import RegisterForm from '@/components/auth/RegisterForm.vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
// const registerLogger = createLogger('Register')

const errorDialogVisible = ref(false)
const isMobile = computed(() => window.innerWidth <= 768)
const onRegisterSuccess = () => {
  ElMessage.success('注册成功！')
  const redirect = (route.query.redirect as string) || '/'
  router.push(redirect)
}

const handleWechatRegister = () => {
  ElMessage.info('微信注册功能开发中...')
}

const handleQQRegister = () => {
  ElMessage.info('QQ注册功能开发中...')
}

const handleAlipayRegister = () => {
  ElMessage.info('支付宝注册功能开发中...')
}

const goToHome = () => {
  router.push('/')
}

// 监听错误状态
watch(
  () => authStore.error,
  (newError) => {
    if (newError) {
      errorDialogVisible.value = true
    }
  },
)

onMounted(() => {
  // 如果已登录，跳转到首页
  if (authStore.isLoggedIn) {
    router.push('/')
  }
})
</script>

<style scoped lang="scss">
.register-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);

  .register-form-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-radius: 0 20px 20px 0;

    .back-to-home {
      position: absolute;
      top: 2rem;
      left: 2rem;
      z-index: 10;

      .back-button {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 90, 0, 0.2);
        border-radius: 12px;
        color: #ff5a00;
        font-size: 0.9rem;
        padding: 0.75rem 1.25rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(255, 90, 0, 0.15);

        &:hover {
          background: rgba(255, 90, 0, 0.08);
          border-color: #ff5a00;
          color: #ff5a00;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(255, 90, 0, 0.25);
        }

        .el-icon {
          margin-right: 0.5rem;
          font-size: 1rem;
        }
      }
    }

    .register-header {
      text-align: center;
      margin-bottom: 2.5rem;

      .logo {
        font-size: 2.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #ff5a00, #ff0036);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1.5rem;
        letter-spacing: 1px;
      }

      h2 {
        color: #2c3e50;
        margin: 0 0 0.8rem 0;
        font-size: 2rem;
        font-weight: 600;
      }

      .subtitle {
        color: #7f8c8d;
        margin: 0;
        font-size: 1.1rem;
        font-weight: 400;
      }
    }

    .register-form {
      width: 100%;
      max-width: 380px;

      :deep(.el-form-item) {
        margin-bottom: 1.5rem;
      }

      :deep(.el-input__wrapper) {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(255, 90, 0, 0.15);
        }
      }

      .verification-item {
        .el-form-item__content {
          display: flex;
          gap: 0.8rem;
        }

        .send-code-btn {
          min-width: 130px;
          border-radius: 12px;
          font-weight: 500;
        }
      }

      .register-button {
        width: 100%;
        height: 52px;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 12px;
        background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
        border: none;
        box-shadow: 0 4px 15px rgba(255, 90, 0, 0.35);
        transition: all 0.3s ease;
        margin-top: 1.5rem;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(255, 90, 0, 0.45);
        }
      }

      .social-register {
        margin-top: 2.5rem;

        .divider {
          text-align: center;
          color: #95a5a6;
          margin: 2rem 0 1.5rem 0;
          position: relative;
          font-size: 0.9rem;

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
            z-index: 1;
          }

          span {
            background: rgba(255, 255, 255, 0.98);
            padding: 0 1.5rem;
            position: relative;
            z-index: 2;
          }
        }

        .social-buttons {
          display: flex;
          justify-content: center;
          gap: 1.2rem;

          .el-button {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 2px solid #f0f0f0;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;

            &:hover {
              background: #f8f9fa;
              border-color: #ff5a00;
              transform: translateY(-2px);
              box-shadow: 0 4px 15px rgba(255, 90, 0, 0.2);
            }
          }
        }
      }

      .login-link {
        text-align: center;
        margin-top: 2rem;
        color: #7f8c8d;
        font-size: 0.95rem;

        a {
          color: #ff5a00;
          text-decoration: none;
          font-weight: 600;

          &:hover {
            text-decoration: underline;
            color: #ff0036;
          }
        }
      }
    }
  }

  .register-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    img {
      max-width: 100%;
      max-height: 80vh;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
  }
}

@media (max-width: 768px) {
  .register-container {
    .register-form-wrapper {
      padding: 1rem;
      max-width: none;
    }

    .register-image {
      display: none;
    }
  }
}
</style>
